<template>
	<div style="padding: 20px 10px;">
		<el-row style="margin-bottom: 20px;">
			<label for="">标题：</label>
			<el-input style='width: 80%;' v-model="title" placeholder="请输入标题"></el-input>
		</el-row>
		<el-row v-if="articleId" style="margin-bottom: 20px;">
			<el-col :span="5">
				<label for="">平台账号：{{username}}</label>
			</el-col>
			<el-col :span="5">
				<label for="">浏览量：{{view_number}}</label>
			</el-col>
			<el-col :span="8">
				<label for="">发布时间：{{time}}</label>
			</el-col>
		</el-row>
		<el-row style="margin-bottom: 20px;">
			<el-col :span="3">
				<label for="">上传缩略图：</label>
			</el-col>
			<el-col :span="10">
				<!--<el-upload name='files[0]' action="http://www.tp51.com/index/index/uploads" :on-success="handleSuccess" file-list="fileList2" list-type="picture">
					<el-button size="small" type="primary">点击上传</el-button>
					<div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
				</el-upload>-->
				<el-upload class="upload-demo" name="files[0]" action="http://www.tp51.com/index/index/uploads" :limit="1" :on-success="handleSuccess" :file-list="fileList2" list-type="picture">
					<el-button size="small" type="primary">点击上传</el-button>
					<div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
				</el-upload>
			</el-col>
			<el-col :span="3">
				<img :src="smallImageUrl" style="width: 100px;"/>
			</el-col>
		</el-row>
		<el-row style="margin-bottom: 60px;">
			<quill-editor v-model="content" :options="editorOption"></quill-editor>
		</el-row>
		<el-row style="margin-bottom: 10px;">
			<el-button v-if="articleId" type="primary" @click="submitArticle(2)">编辑保存</el-button>
			<el-button v-else type="primary" @click="submitArticle(1)">确认发布</el-button>
		</el-row>
	</div>
</template>

<script>
	import http from 'assets/js/http.js'
	import 'quill/dist/quill.core.css'
	import 'quill/dist/quill.snow.css'
	import 'quill/dist/quill.bubble.css'
	import { quillEditor } from 'vue-quill-editor'
	export default {
		components: {
			quillEditor
		},
		data() {
			return {
				articleId: null,
				title: '',
				username: null,
				time: null,
				fileList2: [],
				smallImageUrl: null,
				content: null,
				editorOption: {
					placeholder: '输入发布文章的内容',
					modules: {
						toolbar: [
							['bold', 'italic', 'underline', 'strike'], // toggled buttons
							[{
								'header': [1, 2, 3, 4, 5, 6, false]
							}],
							['blockquote', 'code-block'],
							['link', 'image'],

						]
					}
				}
			}
		},
		created() {
			_g.closeGlobalLoading()
			this.articleId = this.$route.params.id
			console.log('this.articleId', this.articleId)
			if(this.articleId) {
				_g.openGlobalLoading()
				this.getArticleData(this.articleId)
			}
		},
		methods: {
			getArticleData(articleId) {
				let data = {
					type: 3,
					article_id: articleId
				}
				this.apiPost('/AdminApi/Article/article_deta', data).then(res => {
					console.log('获取详情data', data)
					this.handelResponse(res, data => {
						this.title = data.title;
						this.content = data.content
						this.username = data.username
						this.time = data.time
						this.smallImageUrl = data.image
						this.view_number = data.view_number
						_g.closeGlobalLoading()

					})
				})
			},
			handleSuccess(response, file, fileList) {
				this.smallImageUrl = response.data[0]
			},
			onEditorChange({
				editor,
				html,
				text
			}) {
				this.content = html
			},
			submitArticle(type) {
				let data = {
					type: type,
					image: this.smallImageUrl,
					title: this.title,
					content: this.content,
					article_id: this.articleId
				}
				this.apiPost('/AdminApi/Article/article_add', data).then(res => {
					console.log('发布文章res', res)
					this.handelResponse(res, data => {
						//type:1 添加 2 修改
						if(type == 1) {
							this.$message({
								type: 'success',
								message: '发布成功'
							})
						} else {
							this.$message({
								type: 'success',
								message: '修改成功'
							})
						}
						this.$router.go(-1)
					})
				})
			}

		},
		mixins: [http]

	}
</script>
<style scoped>
	.quill-editor {
		height: 245px;
		.ql-container {
			height: 180px;
		}
	}
</style>